<template>
  <div id="app-container" style="padding: 30px">
    <!-- 查询-->
    <el-form :inline="true" class="demo-form-inline">
      <el-row>
        <!--        <el-col :span="6">-->
        <!--          <el-form-item label="优先级" prop="priority">-->
        <!--            <el-select v-model="dispOrdQuery.priority" clearable placeholder="请选择">-->
        <!--              <el-option :value="1" label="一级"/>-->
        <!--              <el-option :value="2" label="二级"/>-->
        <!--              <el-option :value="3" label="三级"/>-->
        <!--              <el-option :value="4" label="四级"/>-->
        <!--            </el-select>-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->
        <!--        <el-col :span="6">-->
        <!--          <el-form-item label="专业类型">-->
        <!--            <el-select v-model="dispOrdQuery.orderType" clearable placeholder="请选择">-->
        <!--              <el-option :value="1" label="生产调度指令"/>-->
        <!--              <el-option :value="2" label="安全调度指令"/>-->
        <!--              <el-option :value="3" label="开工调度指令"/>-->
        <!--              <el-option :value="4" label="培训调度指令"/>-->
        <!--            </el-select>-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->
        <el-col :span="6">
          <el-form-item label="指令名称">
            <el-input v-model="dispOrdQuery.orderName" placeholder="指令名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-button type="primary" @click="exportExcel">导出<i class="el-icon-download el-icon--right"></i></el-button>
          <el-button type="primary" @click="excelDialogVisible=true">导入<i class="el-icon-upload el-icon--right"></i>
          </el-button>
          <el-button type="primary" @click="getPageDispOrdList()">查询</el-button>
          <el-button type="primary" @click="resetData()">重置</el-button>
        </el-col>
      </el-row>

    </el-form>
    <!-- 列表 -->
    <el-table :data="dispOrdList" border fit highlight-current-row @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"/>
      <el-table-column label="序号" width="70" align="center">
        <template slot-scope="scope">
          {{ (pageNo - 1) * pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="orderName" label="指令名称" width="200"/>
      <el-table-column label="优先级">
        <template slot-scope="scope">
          {{
          scope.row.priority === 1 ? '一级' :
          scope.row.priority === 2 ? '二级' :
          scope.row.priority === 3 ? '三级' : '四级'
          }}
        </template>
      </el-table-column>
      <el-table-column label="专业类型">
        <template slot-scope="scope">
          {{
          scope.row.orderType === 1 ? '生产调度指令' :
          scope.row.orderType === 2 ? '安全调度指令' :
          scope.row.orderType === 3 ? '开工调度指令' : '培训调度指令'
          }}
        </template>
      </el-table-column>
      <el-table-column prop="orderDescribe" label="指令描述"/>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      :page-size="pageSize"
      :current-page="pageNo"
      :total="total"
      :pager-count="11"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="getPageDispOrdList">
    </el-pagination>
    <!-- 操作按钮 -->
    <el-row>
      <el-col :span="2" :offset="8">
        <el-button type="primary" @click="toCreateDispOrd()">创建</el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="toUpdateDispOrd()"
                   :disabled="this.multipleSelection.length === 0 || this.multipleSelection.length > 1">修改
        </el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="deleteDispOrd()"
                   :disabled="this.multipleSelection.length === 0 || this.multipleSelection.length > 1">删除
        </el-button>
      </el-col>
    </el-row>
    <!-- 创建对话框 -->
    <el-dialog
      title="增加集团调度指令信息"
      :visible.sync="dialogVisible"
      width="50%">
      <el-form :model="dispOrd" :rules="rules" ref="dispOrd" label-width="130px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="优先级" prop="priority">
              <el-select v-model="dispOrd.priority" clearable placeholder="请选择">
                <el-option :value="1" label="一级"/>
                <el-option :value="2" label="二级"/>
                <el-option :value="3" label="三级"/>
                <el-option :value="4" label="四级"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="专业类型" prop="orderType">
              <el-select v-model="dispOrd.orderType" clearable placeholder="请选择">
                <el-option :value="1" label="生产调度指令"/>
                <el-option :value="2" label="安全调度指令"/>
                <el-option :value="3" label="开工调度指令"/>
                <el-option :value="4" label="培训调度指令"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="指令名称" prop="orderName">
              <el-input v-model="dispOrd.orderName"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="指令描述" prop="orderDescribe">
              <el-input v-model="dispOrd.orderDescribe" :rows="10" type="textarea"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3" :offset="5">
            <el-form-item>
              <el-button :disabled="saveBtnDisabled" type="primary" @click="saveDispOrd('dispOrd')">保存</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item>
              <el-button type="primary" @click="dialogVisible = false">返回</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <!-- 创建导入对话框-->
    <el-dialog
      title="导入文件"
      :visible.sync="excelDialogVisible"
      width="30%">
      <el-upload
        ref="upload"
        name="file"
        accept="application/vnd.ms-excel"
        :action="BASE_API + '/pms/dispord/importExcel'"
        :on-success="fileUploadSuccess"
        :on-error="fileUploadError"
        :disabled="importBtnDisabled"
        :limit="1"
        :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="importExcel">上传到服务器</el-button>
      </el-upload>
    </el-dialog>
  </div>
</template>

<script>
  import dispord from '@/api/pms/dispord'

  export default {
    data() { // ## 定义变量和初始值
      return {
        countName: 0,
        dispOrdList: null, // ## 数据列表
        dispOrdQuery: {},   // ## 查询条件封装对象
        total: 0,   // ## 总记录数
        pageNo: 1,  // ## 页码
        pageSize: 10, // ## 每页显示记录数
        multipleSelection: [], //## 记录表格复选框选中的值
        dialogVisible: false, // ## false 不打开对话框
        dispOrd: {}, // ## 调度指令库封装类
        saveBtnDisabled: false, // ## false 不禁用按钮
        BASE_API: process.env.VUE_APP_BASE_API, // ## 接口API地址
        excelDialogVisible: false, // ## 导入Excel窗口, false为关闭
        importBtnDisabled: false, // ## 按钮是否禁用,false为不禁用
        rules: {
          orderName: [
            { required: true, message: '请输入调度指令名称', trigger: 'blur' },
            { min: 4, max: 20, message: '长度在 4 到 20 个字符', trigger: 'blur' }
          ],
          orderDescribe: [
            { required: true, message: '请输入调度指令描述', trigger: 'blur' }
          ],
          priority: [
            { required: true, message: '请选择优先级', trigger: 'change' }
          ],
          orderType: [
            { required: true, message: '请选择专业类型', trigger: 'change' }
          ]
        }
      }
    },
    created() { // ## 在页面渲染之前，一般先调用methods定义的方法
      this.getPageDispOrdList()
    },
    methods: {  // ## 创建具体的方法，调用dispOrd.js定义的方法
      getPageDispOrdList(pageNo = 1) { // ## 调用 api 获取数据
        this.pageNo = pageNo
        dispord.findPage(this.pageNo, this.pageSize, this.dispOrdQuery)
          .then(response => {
            this.dispOrdList = response.data.item.content
            this.total = response.data.item.totalElements
          })
      },
      handleSelectionChange(val) { // ## 复选框改变时触发该事件
        this.multipleSelection = val
      },
      resetData() { // ## 清空方法
        // ## 清空所有值
        this.dispOrdQuery = {}
        // ## 查询所有数据
        this.getPageDispOrdList()
      },
      toCreateDispOrd() {
        this.dispOrd = {}
        this.dialogVisible = true
        this.saveBtnDisabled = false
      },
      closedialog() {
        this.dialogVisible = false
      },
      saveDispOrd(dispOrd) {
        this.$refs[dispOrd].validate((valid) => {
          if (valid) {
            this.saveBtnDisabled = true
            dispord.add(this.dispOrd)
              .then(response => {
                // ## 关闭对话框
                this.dialogVisible = false
                // ## 消息提示
                this.$message({
                  type: 'success',
                  message: '保存成功'
                })
                // ## 重新查询
                this.getPageDispOrdList()
              })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      toUpdateDispOrd() {
        // ## 获取所有选中行的id组成的字符串，以逗号分隔
        var ids = this.multipleSelection.map(item => item.id).join()
        // ## 跳转
        this.$router.push('/dispord/update/' + ids)
      },
      deleteDispOrd() {
        this.$confirm('此操作将永久删除该记录，是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var ids = this.multipleSelection.map(item => item.id).join()
          dispord.delete(ids)
            .then(response => {
              this.$message({
                type: 'success',
                message: '删除成功！'
              })
              // ## 重新查询
              this.getPageDispOrdList()
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      exportExcel() { // ## 导出Excel
        document.location.href = this.BASE_API + '/pms/dispord/exportExcel'
      },
      importExcel() {  // ## 导入文件
        // ## 禁用按钮
        this.importBtnDisabled = true
        this.$refs.upload.submit()
      },
      fileUploadSuccess(response) {  // ## 导入成功
        // ## 导入成功后关闭窗口
        this.excelDialogVisible = false
        // ## 重新查询获取新数据
        this.getPageDispOrdList()
        // ## 提示信息
        this.$message({
          type: 'success',
          message: '导入成功'
        })
      },
      fileUploadError() {  // ## 导入失败
        // ## 提示信息
        this.$message({
          type: 'error',
          message: '导入失败'
        })
      }
    }
  }
</script>

<style scoped>

</style>
